<template>
    <Card v-bind="$attrs" title="月电量报表">
        <template #extra>
            <Select 
            v-model:value="dzId" 
            allowClear
            placeholder="请选择充电桩" 
            :options="stationList"
            optionLabelProp="name"
            :fieldNames = "{ label: 'name', value: 'id' }"
            option-filter-prop="name" show-search style="width: 300px" @change="handleDzChange">
            </Select>
        </template>
 
      <div ref="chartRef" :style="{ height, width }"></div>
      <div class="text-center position-absolute w-full bottom-4"><a @click="handleToDetail">点击查看数据详情</a></div>

    </Card>
  </template>
  <script lang="ts" setup>
  import { onMounted, ref, Ref, watch } from 'vue';
  import { Card, Select } from 'ant-design-vue';
  import { useECharts } from '@/hooks/web/useECharts';
  import { PropType } from 'vue';
  import { defHttp } from '@/utils/http/axios';
  import { useRouter } from 'vue-router';
  const router = useRouter();
  defineProps({
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: '360px',
    },
  });
  
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>);
  
  const stationList = ref([]);
  const getStationList = async (areaId: string) => {
    stationList.value = await defHttp.get({
      url: '/admin/main/stationList',
      params: { areaId },
    });
  };
  const getData = async () => {
    getInstance()?.showLoading();
    let res = [];
    try {
        res = await defHttp.get({
        url: '/statistic/powerStatistic',
        params: { stationId: dzId.value, areaId: areaIdTemp.value },
    })
    } finally {
        getInstance()?.hideLoading();
    }
    setOptions(
        {
            xAxis: {
            type: 'category',
            boundaryGap: false,
            name: '日期',
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
        },
        yAxis: {
            type: 'value',
            name: '用电量（度）',
        },
        series: [
        {
          name: '月电量统计',
          data: res
        }]
    })
  };
  const dzId = ref()
  const areaIdTemp = ref()
  watch(() => areaIdTemp.value, (areaId) => {
    debugger
    getStationList(areaId);
    console.log(areaId, 'wt')
  });
  const handleDzChange = (value) => {
    getData();
  }
  onMounted(async () => {
    debugger
    getStationList(areaIdTemp.value);
  });
  const reload = (areaId) => {
    areaIdTemp.value = areaId
    getData();
  }
  const handleToDetail = () => {
    router.push({
      name: 'PowerList',
    })
  }
  defineExpose({
    reload
  });
  </script>
  